<script setup>
import { inject, watchEffect } from 'vue';
import * as THREE from 'three';

const scene = inject('scene');

const props = defineProps({
  width: { // x
    type: Number,
    default: 1,
  },
  height: { // y
    type: Number,
    default: 1,
  },
  depth: { // z
    type: Number,
    default: 1,
  },
  materialType: {
    type: String, // 'MeshPhysicalMaterial' | 'MeshPhongMaterial' | 'MeshLambertMaterial'
    default: 'MeshBasicMaterial',
  },
  color: {
    type: String,
    default: 'pink',
  },
});

// 几何描述 （半径，水平平滑度，垂直平滑度）
const geometry = new THREE.BoxGeometry( props.width, props.height, props.depth );
// 材质
const material = new THREE[ props.materialType ]( { color: new THREE.Color( props.color ) } );
// 生成一个立方体(-2, 0, 0)
const box = new THREE.Mesh( geometry, material );

scene.add( box );

</script>

<template></template>
